<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>	
<%String language = request.getParameter("lang"); 
String anyo = request.getParameter("anyo"); 
String month = request.getParameter("month");
String sexo = request.getParameter("sexo");
String langAnt = request.getParameter("langAnt");
%>
<fmt:setLocale value="<%=language %>" scope="page"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="styles/style1.css" type="text/css" rel="stylesheet"/>
	<!-- <link href="paroSexos.js" type="application/json" rel="exhibit/data" /> -->
	<!-- <link href="ParoSexosServlet?lang=<%=language %>&anyo=<%=anyo %>&month=<%=month %>&sexo=<%=sexo %>&langAnt=<%=langAnt %>" type="application/json" rel="exhibit/data" /> --> 
	<link href="services/paro/generos?lang=<%=language %>&anyo=<%=anyo %>&month=<%=month %>&sexo=<%=sexo %>&langAnt=<%=langAnt %>" type="application/json" rel="exhibit/data" />
	<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" type="text/javascript"></script>
	<script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/chart/chart-extension.js"></script>
	<script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/timeplot/timeplot-extension.js"></script>
	<script type="text/javascript">
		var timeGeometer = function(grid) {
		return new Timeplot.DefaultTimeGeometry({
		gridColor: grid,
		axisLabelsPlacement: "top"
		});
		};
		var valueGeometer = function(grid) {
		return new Timeplot.DefaultValueGeometry({
		gridColor: grid,
		axisLabelsPlacement: "left",
		gridType: "short",
		min: 0.225,
		max: 0.775
		});
		};
	</script>
	<title><fmt:message key="exhibitsexos.title"/></title>
</head>
<body>
	<div id="cabecera">
			<p><a href="exhibitParoSexos.jsp?lang=es&anyo=<%=anyo%>&month=<%=month%>&sexo=<%=sexo%>&langAnt=<%=language%>"><fmt:message key="spanish"/><img src="images/Spain.png" alt="Bandera española"/></a>/<a href="exhibitParoSexos.jsp?lang=en&anyo=<%=anyo%>&month=<%=month%>&sexo=<%=sexo%>&langAnt=<%=language%>"><fmt:message key="english"/><img src="images/england.png" alt="Bandera inglesa"/></a></p>
	</div>
	
	<h1><fmt:message key="exhibitsexos.title"/></h1>
	
	<table width="100%">
		<tr valign="top">
			<td ex:role="viewPanel" width="75%">

				<div ex:role="exhibit-view"
					ex:viewClass="Exhibit.TabularView"
					ex:columns=".sexo, .month, .year, .unemployment"
					ex:columnLabels="<fmt:message key="exhibitsexos.genres"/>, <fmt:message key="exhibitsexos.month"/>, <fmt:message key="exhibitsexos.year"/>, <fmt:message key="exhibitsexos.unemployment"/>"
					ex:columnFormats="list, list, number, number"
					ex:sortColumn="2"
					ex:possibleOrders=".month"
					ex:sortAscending="true">
				</div>
				<div ex:role="view"
					ex:viewClass="Exhibit.BarChartView"
					ex:label="<fmt:message key="exhibitsexos.labelbar"/>"
					ex:x=".unemployment"
					ex:xLabel="<fmt:message key="exhibitsexos.unemployment"/>"
					ex:y=".period"
					ex:yLabel="<fmt:message key="exhibitsexos.period"/>"
					ex:colorkey=".sexo">
				</div>
				<div ex:role="view"
					ex:viewClass="Timeplot"
					ex:label="<fmt:message key="exhibitsexos.diagram"/>"
					ex:seriesConnector=".sexo"
					ex:pointTime=".period"
					ex:pointValue=".unemployment"
					ex:colorKey=".month"
					ex:timeGeometry="timeGeometer"
					ex:valueGeometry="valueGeometer">
				</div>
			</td>
			<td width="25%">
				<div ex:role="facet" ex:facetClass="TextSearch"></div>
				<div ex:role="facet" ex:expression=".sexo" ex:facetLabel="<fmt:message key="exhibitsexos.genres"/>"></div>
				<div ex:role="facet" ex:expression=".period" ex:facetLabel="<fmt:message key="exhibitsexos.period"/>"></div>
				<div ex:role="facet" ex:expression=".year" ex:facetLabel="<fmt:message key="exhibitsexos.year"/>"></div>
			</td>
		</tr>
	</table>

</body>
</html>